import Vue from 'vue'
import VueRouter from 'vue-router'  // 导入 Vue Router 3
import Login from '@/views/Login.vue'

Vue.use(VueRouter)  // Vue 2 需要显式安装插件

export default new VueRouter({
  mode: 'history',  // 可选，使用 HTML5 History 模式
  routes: [
    {
      path: '/',
      name: 'login',
      component: Login
    },
    {
      path: '/main',
      name: 'main',
      component: () => import('@/views/Main.vue'),
      props: route => ({
        username: route.query.username || 'admin'
      }),
      children: [
        {
          path: 'home/:id',
          name: 'home',
          component: () => import('@/views/Home.vue'),
          props: true
        },
        {
          path: 'users/:id?',
          name: 'users',
          component: () => import('@/views/Users.vue'),
          props: true
        },
        {
          path: 'settings',
          name: 'settings',
          component: () => import('@/views/Settings.vue'),
          props: route => ({ query: route.query })
        }
      ]
    },
    {
      // Vue Router 3 的通配符路由语法
      path: '*',
      name: '404',
      component: () => import('@/views/NotFound.vue')
    }
  ]
})